<script setup>
import { onMounted, ref } from 'vue'
import { queryUser,updateUser,uploadImg } from '../../../api/user';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
const imageUrl = ref('')
const user = ref({
    id: '',
    image: '',
    name: '',
    age: '',
    phone: '',
    email: '',
    gender: '',
    introduce: ''
})

const handleAvatarSuccess = (response)=> {
    console.log(response)
    user.value.image = response.data
}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' &&  rawFile.type !== 'image/png') {
    ElMessage.error('只支持上传图片!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('只能上传10M以内的图片')
    return false
  }
}


const token = ref('')
const getUser = async () => {
//   const res = await queryUser(user.value.id)
  const res = await queryUser(1)
  console.log(user.value.id)
  user.value = res.data 
  console.log(res)
}
const update = async () => {
    const result = await updateUser(user.value)
    console.log(result)
    if (result.code == 1) {
        ElMessage.success('修改成功')
    } else {
        ElMessage.error('修改失败')
    }
}
const upload = async () => { 
    const result = await uploadImg()
}
onMounted(() => {
    // 获取本地登录用户 id 并赋值给 user.id
    const loginUser = JSON.parse(localStorage.getItem('loginUser'));
    if (loginUser && loginUser.id) {
        user.value.id = loginUser.id;
    }
    if (loginUser && loginUser.id) {
        token.value = loginUser.token;
    }
    getUser()
})
</script>

<template>
        <div class="user-card">
            <form class="form-box">
                <div class="form-row">
                    <el-upload
                        class="avatar-uploader"
                        action="http://127.0.0.1:8080/upload"
                        :headers="{ token: token }"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <label class="form-label">当前头像</label>
                        <img v-if="user.image" :src="user.image" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </div>
                <div class="form-row">
                    <label class="form-label required">昵称</label>
                    <input class="form-input" type="text"  placeholder="请输入昵称" v-model="user.name" />
                </div>
                <div class="form-row">
                    <label class="form-label required">性别</label>
                    <div class="radio-group">
                        <label><input type="radio" name="gender" value="男" v-model="user.gender" /> 男</label>
                        <label><input type="radio" name="gender" value="女" v-model="user.gender" /> 女</label>
                    </div>
                </div>
                <div class="form-row">
                    <label class="form-label">年龄</label>
                    <input type="text" name="age"  placeholder="请输入班级名称" v-model="user.age"/>
                </div>
                <div class="form-row">
                    <label class="form-label">电话号码</label>
                    <input type="text" name="phone" placeholder="请输入电话号码" v-model="user.phone"/>
                </div>
                <div class="form-row">
                    <label class="form-label">邮箱</label>
                    <input type="text" name="email" placeholder="请输入邮箱" v-model="user.email"/>
                </div>
                <div class="form-row">
                    <label class="form-label">个人简介</label>
                    <textarea name="introduction" style="width: 661px; height: 121px" placeholder="请输入个人简介" v-model="user.introduce"></textarea>
                </div>
                <div class="form-row btn-row">
                    <button class="btn save" type="button" @click="update">保存</button>
                    <button class="btn cancel" type="button">返回</button>
                </div>
            </form>
        </div>
</template>

<style scoped>
/* 主体容器 */
/* 卡片式表单居中 */
.user-card {
    width: 800px;
    margin: 32px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 32px 40px 24px 40px;
}
.form-box {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
.form-label {
    width: 90px;
    font-size: 16px;
    color: #333;
    text-align: right;
    margin-right: 16px;
}
.form-label.required::before {
    content: '*';
    color: #f56c6c;
    margin-right: 2px;
}
.form-input {
    flex: 1;
    height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 15px;
}
.avatar {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid #eee;
    object-fit: cover;
}
.radio-group {
    display: flex;
    gap: 24px;
}
.btn-row {
    justify-content: center;
    gap: 32px;
}
.btn {
    width: 120px;
    height: 36px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    margin-top: 16px;
    cursor: pointer;
}
.btn.save {
    background: #409eff;
    color: #fff;
}
.btn.cancel {
    background: #fff;
    color: #409eff;
    border: 1px solid #409eff;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}


.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>